<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="utf-8" />
    <script src="/static/order/confirm/js/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/order/confirm/css/JD2.css" />
    <title></title>
</head>
<body>
<!--顶部-->
<header>
    <div class="header">
        <ul class="header-right">
            <li>  [[          ${session.loginUser==null?'':session.loginUser.nickname}            ]]<img src="/static/order/confirm/img/03.png" style="margin-bottom: 0px;margin-left3: 3px;" /><img src="/static/order/confirm/img/06.png" /></li>
            <li>|</li>
        </ul>
        <div style="clear: both;"></div>
    </div>
</header>
<!--主体部分-->


<h1>    这个是  订单  确认页        </h1>

<p class="p1">填写并核对订单信息  <span style="color: red" th:if="${session.msg!=null}" th:each="val : ${session.msg} " th:text="${val}"></span></p>
<div class="section">
    <!--收货人信息-->
    <div class="top-2">
        <span>收货人信息</span>
        <span>新增收货地址</span>
    </div>
    <!--地址-->
    <div class="top-3  addr-item "  th:each="addr :   ${orderConfirmData.address}">
        <p th:attr="def=${addr.defaultStatus},addrId=${addr.id}">[[${addr.name}]]</p><span>[[${addr.name}]] [[${addr.province}]] [[${addr.detailAddress}]] [[${addr.phone}]] </span>
    </div>
    <p class="p2">更多地址︾</p>
    <div class="hh1"/></div>
<!--********************************************************************************************-->
<!--谷粒学院自提-->
<div class="top-4">
    <p>谷粒学院自提</p>
    <p>省运费·无续重·随时取</p>
    <p class="xiang">详情</p>
</div>
<!--地址-->
<div class="top-5">
    <p>北京昌平区</p><span>北京市  昌平区城区晨曦小区-16号楼 吉利大学  齐天大圣 150****2245</span><img src="/static/order/confirm/img/09.png" /><span>距收货人0米</span>
    <p class="p3">距离最近</p><span class="xiu">修改自提点</span>
</div>
<div class="hh1" /></div>
<!--支付方式-->
<h4 class="h4">支付方式</h4>
<div class="top-6">
    <p>货到付款</p>
    <p><span>惠</span>在线支付</p>
</div>
<div class="hh1"></div>
<!--送货清单-->
<h4 class="h4" style="margin-top: 5px;">送货清单</h4>
<div class="top_1">
    <div class="to_left">
        <h5><span class="peisong">配送方式</span><span class="dui"><img src="/static/order/confirm/img/i_03.png"/> 对应商品</span></h5>
        <div class="box">
            谷粒学院快递
        </div>
        <p class="biao">
            <span class="til">标 准 达 ：</span>
            <span class="con">预计 12月16日[今天] 15:00-19:00 送达</span>
            <a href="/static/order/confirm/#">修改</a>
        </p>
        <div class="updata-1">
            <img src="/static/order/confirm/img/im_06.png" />
            <span>京准达 标准达</span>
            <span style="color: black;"> 配送服务全面升级</span>
        </div>
        <div class="hh1"></div>
        <p class="tui">
            <span class="til">退换无忧：</span>
            <span class="con">
							<input type="checkbox" />
							自签收后7天内退货，15天内换<span style="font-size: 12px;margin-left: 5px"> ￥ 0.50</span><br />
						<span class="nul">货，</span>可享1次上门取件服务 ﹀
						</span>
        <div class="updata-2">
            <img src="/static/order/confirm/img/im_11.png" />
            <span>京准达运费大促（限自营中小件）</span>
        </div>
        </p>
        <p class="kg" style="color:#666666;margin-top: 13px;font-size: 12px">总重量 :<span style="color:#999999;font-size: 12px">0.095kg</span></p>
    </div>
    <div class="to_right">
        <h5>商家：谷粒学院自营</h5>
        <div><button>换购</button><span>已购满20.00元，再加49.90元，可返回购物车领取赠品</span></div>
        <!--图片-->
        <div class="yun1" th:each=" item : ${orderConfirmData.items}">
            <img th:src="${item.image}" class="yun"  style="width: 50px;height: 100px;"/>
            <div class="mi">
                <p>[[${item.title}]] <span style="color: red;"> ￥ [[${item.price}]]</span> <span> x[[${item.count}]] </span> <span>[[${orderConfirmData.stocks[item.skuId]?"有货":"无货"}]]</span></p>
                <p>  <span>0.095kg</span></p>
                <p class="tui-1"><img src="/static/order/confirm/img/i_07.png" />支持7天无理由退货</p>
            </div>
        </div>
        <div class="hh1"></div>
        <p>退换无忧 <span class="money">￥ 0.00</span></p>
    </div>
</div>
<div class="bto">
    <div class="hh2"></div>
    <h4 class="float">发票信息</h4>
    <div class="note float"><img src="/static/order/confirm/img/i_11.png" /> <span>开企业抬头发票须填写纳税人识别号，以免影响报销</span></div>
    <ul style="clear: both;">
        <li>电子普通发票 <img src="/static/order/confirm/img/i_14.png" /></li>
        <li>个人</li>
        <li>商品明细</li>
        <li>
            <a href="/static/order/confirm/">修改</a>
        </li>
    </ul>
    <div class="hh3"></div>
    <h4 class="clear">使用优惠/礼品卡/抵用 ^</h4>
    <ul>
        <li class="red">优惠卡</li>
        <li>礼品卡</li>
        <li>京豆</li>
        <li>余额</li>
        <li>领奖码</li>
    </ul>
    <div class="tuijian clear">
        <input type="checkbox" />
        <span>优惠组合推荐</span>
    </div>
</div>
<div class="xia">
    <div class="qian">
        <p class="qian_y">
            <span>[[${orderConfirmData.count}]]</span>
            <span>件商品，总商品金额：</span>
            <span class="rmb">￥[[${orderConfirmData.total}]]</span>
        </p>
        <p class="qian_y">
            <span>返现：</span>
            <span class="rmb">  -￥0.00</span>
        </p>
        <p class="qian_y">
            <span>运费： </span>
            <span class="rmb"> &nbsp ￥<b id="fareEle"></b></span>
        </p>
        <p class="qian_y">
            <span>服务费： </span>
            <span class="rmb"> &nbsp ￥0.00</span>
        </p>
        <p class="qian_y">
            <span>退换无忧： </span>
            <span class="rmb"> &nbsp ￥0.00</span>
        </p>
    </div>
    <div class="yfze">
        <p class="yfze_a"><span class="z">应付总额：</span><span class="hq">￥<b id="payPriceEle">[[${#numbers.formatDecimal(orderConfirmData.payPrice,1,2)}]]</b></span></p>
        <p class="yfze_b">寄送至： <span id="receiveAddressEle"></span> 收货人：<span id="receiverEle"></span></p>
    </div>
    <form action="http://order.gulimall.com/submitOrder" method="post">
        <input type="hidden" name="addrId" id="addrIdInput">
        <input type="hidden" name="payPrice" id="payPriceInput">
    <input  name="orderToken" th:value="${orderConfirmData.orderToken}">
    <button class="tijiao"  type="submit">提交订单</button>
    </form>
    <h1>AAAAAAAa</h1>
</div>
</div>
<script>
    $(document).ready(function () {
        $('.header-right li:nth-of-type(6)').hover(function(){
            $('.header-r-11').css('display','block')
        },function(){
            $('.header-r-11').css('display','none')
        })
        $('.header-right li:nth-of-type(12)').hover(function(){
            $('.header-r-2').css('display','block')
        },function(){
            $('.header-r-2').css('display','none')
        })
        $('.header-right li:nth-of-type(14)').hover(function(){
            $('.header-r-3').css('display','block')
        },function(){
            $('.header-r-3').css('display','none')
        })
        $('.header-l-2').hover(function(){
            $('.header-l-d').css('display','block')
        },function(){
            $('.header-l-d').css('display','none')
        })
        $('.header-r-4').hover(function(){
            $('.h-r-1').css('display','block')
        },function(){
            $('.h-r-1').css('display','none')
        })
        highlight()
        getFare($(".addr-item p[def='1']").attr("addrId"))
    })
    function  highlight(){
        $(".addr-item p").css({"border": "2px solid gray"})
        $(".addr-item p[def='1']").css({"border": "2px solid red"})
    }
    $(".addr-item p").click( function () {
        $(".addr-item p").attr("def","0")
        $(this).attr("def","1")
        highlight()
        var addrId= $(this).attr("addrId")
        //发送ajax获取运费信息
        getFare(addrId)
    })
    function  getFare(addrId){
        $("#addrIdInput").val(addrId)
        $.get("http://gulimall.com/api/ware/wareinfo/fare?addrId="+addrId,function (resp) {
            $("#fareEle").text(resp.data.fare)
            var total=[[${orderConfirmData.total}]]
            var payPrice  =   total * 1 +resp.data.fare*1
            $("#payPriceEle").text(payPrice)
            $("#payPriceInput").val(payPrice)
            $("#receiveAddressEle").text(resp.data.address.province+" "+resp.data.address.address.detailAddress)
            $("#receiverEle").text(resp.data.address.name)
        })
    }
</script>
</body>
</html>